﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />
    <link href="../assets/css/custom-styles.css" rel="stylesheet" />
    <link href="../assets/css/dataTables.bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div id="wrapper">
        <div id="page-wrapper">
            <div id="page-inner">
			 <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            <i class="fa fa-users">&nbsp;</i>角色管理 <small>角色信息列表</small>
                        </h1>
                    </div>
                </div> 
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                             <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#saveModal">
                              	添加角色
                            </button>
                        </div>
                        <!-- 弹出层(添加/编辑) -->
                        <div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-labelledby="saveModalLabel" aria-hidden="true">
                                <div class="modal-dialog"  style="width:648px;">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="saveModalLabel" style="font-weight: bolder;">添加/修改角色</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-group input-group">
	                                            <span class="input-group-addon">角色名称</span>
	                                            <input type="text" id="roleid" hidden="hidden">
	                                            <input type="text" id="rolename" class="form-control" placeholder="请输入角色名称" maxlength="20">
	                                        </div>
	                                        <div class="form-group" id="navigatediv">
	                                            
	                                        </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                         <!-- 弹出层（删除） -->
                         <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" data-id="" aria-labelledby="myModalLabel" aria-hidden="true">
						    <div class="modal-dialog">
						        <div class="modal-content">
						            <div class="modal-body">
						            	<input tyle="text" id="delid" value="" hidden="hidden">
						                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						                	你确认要删除么？
						            </div>
						            <div class="modal-footer">
						                <button type="button" class="btn btn-primary" id="deleteid" onclick="doDel()">确认</button>
						                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						            </div>
						        </div>
						    </div>
						</div>
						<!-- 数据table -->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example" >
                                    <thead>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
            </div>
    <script src="../assets/js/jquery-1.10.2.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/jquery.metisMenu.js"></script>
    <script src="../assets/js/dataTables/jquery.dataTables.min.js"></script>
    <script src="../assets/js/dataTables/dataTables.bootstrap4.js"></script>
    <script src="../js/role.js"></script>
        <script>
            $(document).ready(function () {
            	//$('#dataTables-example').dataTable().fnClearTable();//将数据清除
            	$('#dataTables-example').dataTable({
                    "bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示  
                    "bServerSide" : true, //是否启动服务器端数据导入  
                    "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
                    "bJQueryUI" : true, //是否使用 jQury的UI theme  
//                    "sScrollY" : 450, //DataTables的高  
//                    "sScrollX" : 820, //DataTables的宽  
                    "aLengthMenu" : [10,20, 50, 100], //更改显示记录数选项  
                    "iDisplayLength" : 10, //默认显示的记录数  
                    "bAutoWidth" : true, //是否自适应宽度  
                    "bScrollInfinite" : true, //是否启动初始化滚动条  
                    "bScrollCollapse" : true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变  
                    "bPaginate" : true, //是否显示（应用）分页器  
                    "sInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数  
                    "sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页  
                    "bSort" : false, //是否启动各个字段的排序功能  
                    "aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列  
                    "bFilter" : true, //是否启动过滤、搜索功能  
                    "serverSide": false,//打开后台分页
                    "paging": true,
                    "aoColumns" : [{
                        "mDataProp" : "id",  
                        "sTitle" : "序号",  
                        "sDefaultContent" : "",  
                        "sClass" : "center",
                        "orderable": false,
                        "width":"5%",
                    }, {  
                        "mDataProp" : "name",  
                        "sTitle" : "角色名",  
                        "sDefaultContent" : "",  
                        "sClass" : "center",
                        "orderable": false,
                        "width":"15%",
                    }, {  
                        "mDataProp" : "navnames",  
                        "sTitle" : "权限",  
                        "sDefaultContent" : "",  
                        "sClass" : "center",
                        "orderable": false,
                        "width":"50%",
                    }, {  
                        "mDataProp" : "createtime",  
                        "sTitle" : "创建时间",  
                        "sDefaultContent" : "",  
                        "sClass" : "center",
                        "orderable": true,
                        "width":"15%",
                    }, {  
                        "mDataProp" : "",  
                        "sTitle" : "操作",  
                        "sDefaultContent" : "",  
                        "sClass" : "center",
                        "orderable": false,
                        "width":"20%",
                    }],
                    "oLanguage": { //国际化配置  
            			        "sProcessing" : "正在获取数据，请稍后...",
            			        "sLengthMenu" : "<font style='color:black;font-size:16px;font-weight:bold;'>每页显示 _MENU_ 条</font>",    
            			        "sZeroRecords" : "没有您要搜索的内容",    
            			        "sInfo" : "<font style='color:black;font-size:16px;font-weight:bold;'>从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条</font>",    
            			        "sInfoEmpty" : "没有记录",
            			        "sInfoFiltered" : "(全部记录数 _MAX_ 条)",    
            			        "sInfoPostFix" : "",    
            			        "sSearch" : "<font style='color:black;font-size:16px;font-weight:bold;'>角色名:</font>",    
            			        "sUrl" : "",
            			        "oPaginate": {
        						         "sFirst" : "第一页",    
        						         "sPrevious" : "上一页",    
        						         "sNext" : "下一页",    
        						         "sLast" : "最后一页"    
          					      },
            		        	  "aria": {
            		        	        "sortAscending":  ": activate to sort column ascending",
            		        	        "sortDescending": ": activate to sort column descending"
            		        	  }
                    },  
                              
                    "fnRowCallback" : function(nRow, aData, iDisplayIndex) {  
                        /* 用来改写用户权限的 */
                        var editHtml="<button class='btn btn-success btn-sm' data-toggle='modal' data-target='#saveModal' style='background-color:#7D7DFF;font-weight:bold;' data-id='"+aData.id+"'>编辑</button>";
                        var delHtml="&nbsp;<button class='btn btn-success btn-sm' data-toggle='modal' data-target='#deleteModal' style='background-color:#FF9224;font-weight:bold;'  data-id='"+aData.id+"'>删除</button>";
                        $('td:eq(0)', nRow).html(iDisplayIndex+1);
                        $('td:eq(4)', nRow).html(editHtml+delHtml);
                        return nRow;
                    },
                      
                    "sAjaxSource" : req_user+"/role/queryRole",
                        //服务器端，数据回调处理  
                    "fnServerData" : function(sSource, aDataSet, fnCallback) {  
                    	aDataSet.push({"name":"operateid","value":getAdmCookie().id});
                    	console.info(aDataSet);
                        $.ajax({
                            "dataType" : 'json',  
                            "type" : "POST",  
                            "url" : sSource,  
                            "data" : aDataSet,  
                            "success" : fnCallback  
                        });  
                    }  
                });
            	
            	//获取全部导航权限
            	$.ajax({  
                    "dataType" : 'json',  
                    "type" : "POST",  
                    "url" : req_user+"/navigate/queryNavigate",
                    "data" : {"operateid":getAdmCookie().id},
                    "success" : function(data){
                    	var showHtml = "<label>选择权限</label>";
                    	for(var i=0;i<data.data.length;i++){
                    		var pid = data.data[i].pid;
                    		if(pid == 0){
                    			showHtml+="<br>&nbsp;<label class='checkbox-inline'><input type='checkbox' style='zoom:150%;' value='"+data.data[i].id+"' id='0n"+data.data[i].id+"' name='nav0'><font style='zoom:150%;'>"+data.data[i].name+"</font></label>";
                    			var id = data.data[i].id;
                    			showHtml+="<br>";
                    			showHtml+="<div style='margin:0px 0px 0px 30px;'>";
                    			for(var j=0;j<data.data.length;j++){
                    				if(data.data[j].pid == id){
                    					showHtml+="&nbsp;<label class='checkbox-inline'><input type='checkbox' style='zoom:130%;' value='"+data.data[j].id+"' id='"+data.data[j].pid+"n"+data.data[j].id+"' name='nav1' alt='"+data.data[i].id+"'><font style='zoom:130%;'>"+data.data[j].name+"</font></label>";
                    				}
                    			}
                    			showHtml+="</div>";
                    		}
                    	}
                    	$("#navigatediv").html(showHtml);
                    	//一级权限点击事件
                    	$("input[name='nav0']").click(function(){
                    		var issel = $(this).get(0).checked;
                    		if(issel){
                    			$("input[alt='"+$(this).val()+"']").prop("checked",true);
                    		}else{
                    			$("input[alt='"+$(this).val()+"']").prop("checked",false);
                    		}
                    	});
                    	//二级权限点击事件
                    	$("input[name='nav1']").change(function(){
                    		var nav0sel = false;
                    		for(var i=0;i<$("input[alt='"+$(this).attr("alt")+"']").length;i++){
                    			var issel = $("input[alt='"+$(this).attr("alt")+"']").get(i).checked;
                    			if(issel){
                    				nav0sel = true;
                    			}
                    		}
                    		$("#0n"+$(this).attr("alt")).prop("checked",nav0sel);
                    	});
                    },
                    "error":function(data){
                    	alert("系统出错，请联系管理员！");
                    }
                });
            });
            
            //点击删除按钮时，给弹出层绑定对应的id值
           	$('#deleteModal').on('show.bs.modal', function (event) {
                   var button = $(event.relatedTarget); // 触发事件的按钮
                   var id = button.data('id'); // 解析出data-id内容
                   $('#delid').val(id);
               });
            
            //点击编辑按钮时，给弹出层绑定对应的id值
           	$('#saveModal').on('show.bs.modal', function (event) {
                   var button = $(event.relatedTarget); // 触发事件的按钮
                   var id = button.data('id'); // 解析出data-id内容
                   if(id){
                	   $('#roleid').val(id);
                	   var reqURL = req_user+"/role/queryRole";
                	   var rolepar = {};
                	   rolepar["id"] = id;
                   	   var data = req_ajax(reqURL,rolepar);
                	   if(data){
                		   $("#rolename").val(data.data[0].name);
                		   var checkboxs = $('#saveModal input[type=checkbox]');
                		   for(var i=0;i<checkboxs.length;i++){
                			   $(checkboxs[i]).prop("checked",false);
                			   var ids = data.data[0].navids.split(",");
                			   for(var j=0;j<ids.length;j++){
                				   if(ids[j] == $(checkboxs[i]).val()){
                					   $(checkboxs[i]).prop("checked",true);
                				   }
                			   }
                		   }
                	   }
                   }else{
                	   cleanShowModel();
                   }
               });
            
            //删除操作
            function doDel(){
            	var id = $('#delid').val();
            	var role = {};
            	role["id"] = id;
            	var reqURL = req_user+"/role/deleteRole";
            	var data = req_ajax(reqURL,role);
            	if(data.flag == 1){
            		window.location.reload();
            	}
            }
            
            //保存按钮点击事件
            function save(){
            	//获取所有的checkbox的值
            	var checkboxs = $('#saveModal input[type=checkbox]:checked');
            	var checkboxSelVal = "";
            	for (var i = 0; i < checkboxs.length; i++) {
					checkboxSelVal += checkboxSelVal == '' ? "" : ",";
					checkboxSelVal += $(checkboxs[i]).val();
				}
            	//保存请求地址
            	var requrl = req_user+"/role/saveRole";
            	//保存请求参数
            	var reqJson = {};
            	reqJson['id'] = $("#roleid").val();
            	reqJson['name'] = $("#rolename").val();
            	reqJson['checkboxSelVal'] = checkboxSelVal;
            	//返回json
            	var resultJson = req_ajax(requrl,reqJson);
            	if(resultJson.flag == 1){
            		alert(resultJson.message);
            		window.location.reload();
            	}
            }
            
            //清空弹出层内所有控件内容
            function cleanShowModel(){
            	$('#roleid').val("");
            	$('#rolename').val("");
            	var checkboxs = $('#saveModal input[type=checkbox]');
            	for(var i=0;i<checkboxs.length;i++){
           			$(checkboxs[i]).prop("checked",false);
            	}
            }
    </script>
    <script src="../assets/js/custom-scripts.js"></script>
    
	<script src="../../common/cookie.js"></script>
	<script src="../js/include.js"></script>
	<script src="../assets/js/jquery.cookie.js"></script>
</body>
</html>
